import * as React from 'react';

import * as Global from '../TS/Global';
import { MessageBox } from './messagebox';
import * as MyCfg from './MyCfg';

export interface DeviceCfgProps extends Global.Myprops {cfg: MyCfg.MsgCfg};

interface DeviceCfgState {
    DeviceName : string;
    User : string;
    PWD : string;
};

export class DeviceCfg extends React.Component < DeviceCfgProps,
DeviceCfgState > {
    constructor(props) {
        super(props);
        //设置状态
        this.state = {
            DeviceName: props.cfg.DeviceName,
            User: props.cfg.User,
            PWD: props.cfg.PWD
        };

    }
    //用于处理收到的数据
    ReciveMsgEvent(source : any, cmd : string, obj?: any, ...args) {
        if (cmd == 'update') {
            this.forceUpdate();
        } else {}
    }

    //下一步进行显示 进行初始化
    componentDidMount() {
        //类似window.onload
        this.setState((prv, prop) => ({
            // count: this.state.count + 1
        }));
    }
    componentWillReceiveProps(props)
    {
        //每次父控件重新绘制,赋值新的props触发
        this.setState({DeviceName: props.cfg.DeviceName, User: props.cfg.User, PWD: props.cfg.PWD});
    }
    public handleClick(e : React.MouseEvent < any >) : void {
        e.preventDefault();
        MyCfg.mycfg.DeviceName = this.state.DeviceName;
        MyCfg.mycfg.User = this.state.User;
        MyCfg.mycfg.PWD = this.state.PWD;
        let msgbox: any = this.refs.messagebox;
        this
            .props
            .OnMessageSendEvent(this, 'nav', 'update');
        msgbox.Show();
    }
    public handleChange(event : any) : void {
        let tcfg: any = this.state;
        tcfg[event.target.name] = event.target.value;
        this.setState(tcfg);
        //console.log(event.target.value);
    }
    public render() : JSX.Element {return(
            <div className="col-xs-12 col-sm-10  col-md-10 ">
                <MessageBox
                    ref="messagebox"
                    MessageType='alert'
                    Title={Global.GetLocal("提醒")}
                    Content={Global.GetLocal("保存配置成功")}/>
                <div className="panel panel-default">
                    <div className="panel-heading">
                        <h3 className="panel-title">{Global.GetLocal("设备信息设置")}</h3>
                    </div>
                    <div className="panel-body">

                        <form action="" method="POST" className="form-horizontal " role="form">
                            <div className="form-group col-sm-7">
                                <label className="col-xs-2 col-sm-4 control-label">{Global.GetLocal("设备名称")}</label>
                                <div className="col-xs-8">
                                    <input
                                        type="text"
                                        name="DeviceName"
                                        className="form-control"
                                        placeholder=" "
                                        value={this.state.DeviceName}
                                        onChange={e => this.handleChange(e)}/>
                                </div>
                            </div>
                            <div className="form-group col-sm-7">
                                <label className="col-xs-2  col-sm-4 control-label">{Global.GetLocal("用户名")}</label>
                                <div className="col-xs-8 col-sm-8">
                                    <input
                                        type="text"
                                        name="User"
                                        className="form-control"
                                        placeholder=" "
                                        value={this.state.User}
                                        onChange={e => this.handleChange(e)}/>
                                </div>
                            </div>
                            <div className="form-group col-sm-7">
                                <label className="col-xs-2 col-sm-4 control-label">{Global.GetLocal("密码")}</label>
                                <div className="col-xs-8">
                                    <input
                                        type="password"
                                        name="PWD"
                                        className="form-control"
                                        placeholder=" "
                                        value={this.state.PWD}
                                        onChange={e => this.handleChange(e)}/>
                                </div>
                            </div>
                            <div className="form-group col-sm-7">
                                <div className="col-sm-10  col-sm-offset-4  col-xs-offset-2">
                                    <button
                                        ref="loginbtn"
                                        type="submit"
                                        className="btn btn-primary"
                                        onClick={e => this.handleClick(e)}>{Global.GetLocal("保存")}</button>
                                </div>
                            </div>
                        </form>

                    </div>
                </div>
            </div>
        );}
}